<template>
  <div class="container-fluid p-4">
    <!-- 考前界面 -->
    <div id="exam-before" class="row">
      <div class="col-md-6 mb-4">
        <el-card class="border-0 shadow-sm exam-info-card">
          <template #header>
            <div class="card-header bg-white py-3">
              <h5 class="mb-0">考试信息</h5>
            </div>
          </template>
          <div class="card-body">
            <div class="mb-3">
              <h4 class="mb-3">静脉输液技术规范期末考核</h4>
              <el-badge type="primary" class="mb-2">理论考试</el-badge>
            </div>
            <div class="row mb-3">
              <div class="col-md-6">
                <p class="mb-1">
                  <i class="bi bi-clock me-2"></i
                  ><strong>考试时长：</strong>60分钟
                </p>
                <p class="mb-1">
                  <i class="bi bi-calendar-event me-2"></i
                  ><strong>开始时间：</strong>2023-06-20 10:00
                </p>
                <p class="mb-1">
                  <i class="bi bi-calendar-x me-2"></i
                  ><strong>截止时间：</strong>2023-06-20 23:59
                </p>
              </div>
              <div class="col-md-6">
                <p class="mb-1">
                  <i class="bi bi-question-circle me-2"></i
                  ><strong>题目数量：</strong>30题
                </p>
                <p class="mb-1">
                  <i class="bi bi-award me-2"></i><strong>总分值：</strong>100分
                </p>
                <p class="mb-1">
                  <i class="bi bi-check-circle me-2"></i
                  ><strong>及格分数：</strong>60分
                </p>
              </div>
            </div>
            <div class="alert alert-info">
              <i class="bi bi-info-circle me-2"></i
              >本次考试包含单选题、多选题和简答题，请在规定时间内完成。
            </div>
          </div>
        </el-card>
      </div>
      <div class="col-md-6 mb-4">
        <el-card class="border-0 shadow-sm exam-notice-card">
          <template #header>
            <div class="card-header bg-white py-3">
              <h5 class="mb-0">考试须知</h5>
            </div>
          </template>
          <div class="card-body">
            <div class="mb-4">
              <h5 class="mb-3">考试规则</h5>
              <ol>
                <li>考试过程中请勿刷新页面，否则可能导致答案丢失。</li>
                <li>考试时间结束后，系统将自动提交当前已答题目。</li>
                <li>请独立完成考试，不得查阅资料或与他人讨论。</li>
                <li>如遇系统问题，请点击"报错"按钮提交问题。</li>
                <li>提交考试后将无法修改答案，请确认无误后再提交。</li>
              </ol>
            </div>
            <div class="mb-4">
              <h5 class="mb-3">评分标准</h5>
              <ul>
                <li>单选题：每题3分，共15题</li>
                <li>多选题：每题5分，共10题</li>
                <li>简答题：每题10分，共5题</li>
              </ul>
            </div>
            <div class="alert alert-warning">
              <i class="bi bi-exclamation-triangle me-2"></i
              >开始考试后，计时器将自动启动，请确保在不受干扰的环境中进行考试。
            </div>
          </div>
        </el-card>
      </div>
      <div class="col-12 text-center mb-4">
        <button id="start-exam-btn" class="btn btn-primary btn-lg px-5">
          <i class="bi bi-play-fill me-2"></i>进入考试
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 这里可以添加考前界面的逻辑代码

onMounted(() => {
  // 初始化侧边栏切换功能
  const sidebarToggle = document.getElementById("sidebarToggle");
  if (sidebarToggle) {
    sidebarToggle.addEventListener("click", function (e) {
      e.preventDefault();
      document.getElementById("wrapper").classList.toggle("toggled");
    });
  }

  // 开始考试按钮事件监听
  const startExamBtn = document.getElementById("start-exam-btn");
  if (startExamBtn) {
    startExamBtn.addEventListener("click", () => {
      // 这里可以添加开始考试的逻辑
    });
  }
});
</script>

<style scoped>
.exam-info-card {
  height: 100%;
  border-left: 4px solid var(--el-color-primary);
}

.exam-notice-card {
  height: 100%;
  border-left: 4px solid var(--el-color-warning);
}

.question-nav-item {
  width: 40px;
  height: 40px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f8f9fc;
  border: 1px solid #e3e6f0;
}

.question-nav-item:hover {
  background-color: #eaecf4;
}

.question-nav-item.active {
  background-color: var(--el-color-primary);
  color: white;
}

.question-nav-item.answered {
  background-color: var(--el-color-success);
  color: white;
}

.exam-container {
  min-height: calc(100vh - 72px);
}

.question-content {
  min-height: 200px;
}

.timer-display {
  font-size: 1.2rem;
  font-weight: bold;
}

.timer-warning {
  color: var(--el-color-danger);
}
</style>
